<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>图片缩放示例</title>
		<!-- 引入 Vue.js 库 -->
		<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
	</head>

	<body>
		<div id="app">
			<!-- 放大按钮，点击调用 zoomIn 方法 -->
			<button @click="zoomIn">放大 10%</button>
			<!-- 缩小按钮，点击调用 zoomOut 方法 -->
			<button @click="zoomOut">缩小 10%</button><br>
			<!-- 绑定图片宽度，根据 data 中的 width 变量动态变化 -->
			<img :width="width" src="img/t03.jpg" alt="">
			{{msg}}<br>
			<input v-model="msg" type="text">
			<hr>
			{{a}}是
			<span v-if="a%2==0">偶数</span>
			<span v-else">奇数</span>
			{{a%2==0?"偶数":"奇数"}}
			<hr>
			姓名:{{student.name}} 年龄:{{student.age}}
			<p>
				{{student.name}} 是
				<!-- 判断学生是否成年 -->
				<span v-if="student.age >= 18">成年人</span>
				<span v-else>未成年人</span>
				<!-- 三元运算符:条件？结果1:结果2 -->
				 {{student.age >=18? "成年人":"未成年人"}} 
			</p>
		</div>
		<script>
			// 创建 Vue 应用实例
			const app = Vue.createApp({
				data() {
					return {
						// 初始图片宽度
						width: 200,
						msg: 'hello vue',
						a: 6,
						student: {
							name: "张三",
							age: 16
						}
					}
				},
				methods: {
					// 放大方法，将图片宽度增加 10%
					zoomIn() {
						this.width = this.width * 1.1;
					},
					// 缩小方法，将图片宽度减少 10%
					zoomOut() {
						this.width = this.width * 0.9;
					}
				}
			});
			// 将应用挂载到 id 为 app 的 DOM 元素上
			app.mount('#app');
		</script>
	</body>

</html>